<template>
  <el-dialog v-model="dialogVisible" width="80%" title="患者匹配" :close-on-click-modal="false" :show-close="false">
    <div class="right-content">
      <div class="right-center-content">
        <el-form :model="formData" :rules="rules" ref="formRef" label-width="110" label-position="left">
          <div class="p-header"><el-icon>
              <Menu />
            </el-icon>
            <span>患者信息</span>
          </div>
          <div class="card">
            <patient-info></patient-info>
          </div>
          <div class="p-header"><el-icon>
              <Menu />
            </el-icon>
            <span>处方信息</span>
          </div>
          <div class="card">
            <div v-for="(item, index) in noFirstColumnsForPrescription" :key="index" class="input-item">
              <el-form-item :prop="'notFirstPrescriptionForm.' + item.prop" :label="item.label">
                <!-- 输入框 -->
                <el-input v-model="formData.notFirstPrescriptionForm[item.prop]" :placeholder="item.placeholder"
                  :disabled="item.disabled" :maxlength="item.maxlength" v-if="item.type === 'input'" />
                <!-- 下拉框 -->
                <el-select v-model="formData.notFirstPrescriptionForm[item.prop]" :placeholder="item.placeholder"
                  :filterable="item.filterable" :disabled="item.disabled" v-if="item.type === 'select'">
                  <el-option v-for="(item, index) in item.options" :key="index" :label="item.label"
                    :value="item.value" />
                </el-select>
                <!-- 单选框 -->
                <el-radio-group v-model="formData.notFirstPrescriptionForm[item.prop]" v-if="item.type === 'radio'">
                  <el-radio v-for="(item, index) in item.options" :key="index" :value="item.value">{{ item.label
                  }}</el-radio>
                </el-radio-group>
                <!-- 日期 -->
                <el-date-picker v-model="formData.notFirstPrescriptionForm[item.prop]" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" :placeholder="item.placeholder" :disabled="item.disabled"
                  v-if="item.type === 'date'" type="date" style="width: 100%" />
              </el-form-item>
            </div>
            <div class="warning-text">请核对以上病种认定表信息，若有误请协助修正。</div>
          </div>
        </el-form>
      </div>
    </div>
    <template #footer>
      <div class="btns">
        <el-button type="default" @click="cancelFun">取消</el-button>
        <el-button type="primary" @click="submitFun">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import rulesHook from '@/hooks/rules'
import commonMethodsHook from '@/hooks/commonMethods'
import reviewerInfoStore from '@/stores/modules/reviewerInfo';
import { ElMessageBox } from 'element-plus';
import globalStore from '@/stores/modules/global';
const global = globalStore()
const reviewerInfo = reviewerInfoStore()
const formData = reactive({
  patientForm: reviewerInfo.patientForm,
  notFirstPrescriptionForm: reviewerInfo.notFirstPrescriptionForm
})
const dialogVisible = true
const { rules, noFirstColumnsForPrescription } = rulesHook()
const { gotoErrorItem } = commonMethodsHook()
const formRef = ref();
const cancelFun = () => {
  formRef.value.resetFields()
  ElMessageBox.alert('您确定要结束审方吗？', '提示', {
    confirmButtonText: '结束审方',
    callback: (info) => {
      if (info === 'confirm') {
        global.activeIndex = 0;
        global.currentId = '';
        // 跟新左侧历史列表，删除掉审核中的数据
      }
    },
  })
}
const submitFun = () => {
  formRef.value.validate((valid, errorList) => {
    if (valid) {
      // 跳转第四步，审方完成
      global.activeIndex = 4;
    } else {
      // 跳转到错误的输入框
      gotoErrorItem(errorList, formRef.value)
    }
  })
}
</script>
<style scoped lang="scss">
.right-content {
  height: 63vh;
  overflow: auto;

  .card {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10%;
    background: #f6f8fa;

    .input-item {
      width: 40%;
    }

    .warning-text {
      color: red;
      width: 100%
    }
  }
}
</style>